<template>
	<div class="icons">
	  <swiper :options="swiperOption">
	  	<swiper-slide v-for="(page,index) of pages" :key="index">
		  <div class="icon"  v-for="item of page" :key="item.id">
			<div class="icon-img">
			  <img class="icon-img-contern" :src="item.imgUrl"> 
			</div>
			<p>{{item.desc}}</p>
		 </div>
	   </swiper-slide>
	 </swiper>	
   </div>

</template>

<script>
export default{
   props:{
    list:Array
   },
	name:'HomeIcons',
	data (){
		return{
			swiperOption:{
        autoplay:false
	 		},
		}
	},
	computed:{
		 pages () {
          
          const pages = []

          this.list.forEach((item,index) => {
          	const page = Math.floor(index / 8)
          	if (!pages[page]){
          		pages[page] = []
          	}
          	pages[page].push(item)
          })
            
            return pages
		 }
	}
}	


</script>

<style lang="stylus" scoped>
  
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'

  .icons >>> .swiper-container
    height: 0
    padding-bottom: 50%
  .icons
  	margin-top: .1rem  
   .icon
   	position:relative 
   	overflow:hidden
   	float:left
   	height:0
   	width:25%
   	padding-bottom:25%
   .icon-img
   	position: absolute
   	top:0
   	left:0
   	right:0
   	bottom:.44rem
   	box-sizing:border-box
   	padding:.1rem
   	text-align: center
   .icon-img .icon-img-contern
   	height:100%
   .icon p
   	position: absolute
   	left:0
   	right:0
   	bottom:0
   	height:.44rem
   	line-height:.44rem
   	text-align:center
   	color: $darkTextColor
   	ellipsis()
</style>